<script setup lang="ts">
import { ref } from 'vue';

const activeTab = ref('stitch');

const tabs = [
  { id: 'stitch', label: '拼接图片' },
  { id: 'restore', label: '还原图片' }
];

const emit = defineEmits(['change-tab']);

function changeTab(tabId: string) {
  activeTab.value = tabId;
  emit('change-tab', tabId);
}
</script>

<template>
  <header class="app-header">
    <h1>拼好图</h1>
    <div class="tabs">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        :class="{ active: activeTab === tab.id }"
        @click="changeTab(tab.id)"
      >
        {{ tab.label }}
      </button>
    </div>
  </header>
</template>

<style scoped>
.app-header {
  padding: 1rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

h1 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.tabs {
  display: flex;
  gap: 0.5rem;
}

button {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

button.active {
  background-color: #4caf50;
  color: white;
  border-color: #4caf50;
}
</style>